<template>
  <div class="content">
    <div class="cs">
      <Carousel :paths="paths" :task="task" />
    </div>
    <div class="c_right">
      <!-- <n-card title="任务名称"> {{ task.task_name }} </n-card> -->
      <h1>{{ task.task_name }}</h1>
      <!-- <div>任务描述:{{ task.description }}</div> -->
      <n-card title="任务描述:"> {{ task.description }} </n-card>
      <n-button class="btn" type="warning" size="large" strong @click="accept()">接受任务</n-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Carousel from '@/components/AppProvider/carousel/index.vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { searchtaskPhotos, searchinfoPost, acceptTask } from '@/api/post'
import { createLocalStorage } from '@/utils/cache'
const task = ref({})
const task_id = ref(123)
const paths = ref([])
onMounted(() => {
  const url = location.search //获取url中"?"符后的字串
  const id = url.split('=')[1]
  task_id.value = id
  getPaths(id)
  search(id)
})

const router = useRouter()
async function getPaths(id) {
  const res = await searchtaskPhotos({ task_id: id })
  paths.value = res
}
async function search(id) {
  const res = await searchinfoPost({
    create_at: null,
    task_name: null,
    amount: null,
    type: null,
    task_id: id,
  })
  task.value = res[0]
}
async function accept() {
  const ls = createLocalStorage({ prefixKey: 'login_' })
  const user = ls.get('loginInfo')
  const res = await acceptTask({
    userid: user.userid,
    task_id: task_id.value,
  })
  $message.success('任务领取成功！')
  console.log(res)
}
function toMark() {
  router.push('/mark')
}
function toMark2() {
  router.push('/mark2')
}
function toMark3() {
  router.push('/mark3')
}
function toMark4() {
  router.push('/mark4')
}
</script>
<style scoped>
.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  height: 400px;
  margin-top: 80px;
  margin-left: 18%;
  margin-right: 8%;
}
.cs {
  width: 800px;
  height: 400px;
}
.c_right {
  margin-left: 8%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 40%;
}
.btn {
  width: 200px;
  height: 50px;
}
</style>
